<template>
    <el-form :model="tableData" ref="ruleFormRef">
        <el-table ref="multipleTableRef" class="multiple-table" :data="lowCodeStore.ListDesign.listConfig.buttonConfig.tableData.tableList" max-height="400">
            <el-table-column property="buttonName" label="按钮名称" width="300">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.buttonName'">
                        <el-input v-model="scope.row.buttonName" clearable placeholder="请输入按钮名称"></el-input>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column property="buttonPosition" label="按钮位置" width="300">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.buttonPosition'">
                        <el-select v-model="scope.row.buttonPosition" clearable placeholder="选择或者输入中文名" disabled>
                            <el-option key="inline" label="行内" value="inline" />
                            <el-option key="top" label="顶部" value="top" />
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column property="buttonType" label="按钮类型" width="300">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.buttonType'">
                        <el-select v-model="scope.row.buttonType" clearable placeholder="选择或者输入中文名" disabled>
                            <el-option key="translate" label="修改" value="translate" />
                            <el-option key="add" label="新增" value="add" />
                            <el-option key="details" label="详情" value="details" />
                            <el-option key="import" label="导入" value="import" />
                            <el-option key="export" label="导出" value="export" />
                            <el-option key="download" label="下载模板" value="download" />
                            <el-option key="delete" label="删除" value="delete" />
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column property="isShowPC" label="PC端显示" width="100">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.isShowPC'">
                        <el-switch v-model="scope.row.isShowPC" />
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope"><el-button type="primary" link class="is-link-i"
                        @click="handleRemoveItem(scope)">删除</el-button></template>
            </el-table-column>
            <template #empty v-if="tableData.tableList.length === 0"><el-empty description="无数据"></el-empty></template>
        </el-table>
    </el-form>

    <div style="margin-top: 15px;"><el-button type="info" size="small" :icon="Plus"
            @click="handleAddItem">新增一行</el-button>
    </div>

    <!-- <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
    </el-button> -->
</template>

<script setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import pinia from "@/store/pinia";
import { useStore } from "@/store/lowCode.js";
const lowCodeStore = useStore(pinia);

const ruleFormRef = ref()
const multipleTableRef = ref()

const tableData = ref({
    tableList: [
        {
            buttonName: '修改',
            buttonPosition: '行内',
            buttonType: '修改',
            isShowPC: true,
        },
        {
            buttonName: '新增',
            buttonPosition: '顶部',
            buttonType: '新增',
            isShowPC: true,
        },
        {
            buttonName: '详情',
            buttonPosition: '行内',
            buttonType: '详情',
            isShowPC: true,
        },
        {
            buttonName: '导入',
            buttonPosition: '顶部',
            buttonType: '导入',
            isShowPC: true,
        },
        {
            buttonName: '导出',
            buttonPosition: '顶部',
            buttonType: '导出',
            isShowPC: true,
        },
        {
            buttonName: '下载模板',
            buttonPosition: '顶部',
            buttonType: '下载模板',
            isShowPC: true,
        },
        {
            buttonName: '删除',
            buttonPosition: '行内',
            buttonType: '删除',
            isShowPC: true,
        }
    ]
})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            console.log(lowCodeStore.ListDesign.listConfig.buttonConfig.tableData.tableList);
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleAddItem = () => {
    lowCodeStore.ListDesign.listConfig.buttonConfig.tableData.tableList.push({
        buttonName: '删除',
        buttonPosition: '行内',
        buttonType: '删除',
        isShowPC: true,
    });
}

const handleRemoveItem = (scope) => {
    const index = lowCodeStore.ListDesign.listConfig.buttonConfig.tableData.tableList.indexOf(scope.row);
    if (index !== -1) {
        lowCodeStore.ListDesign.listConfig.buttonConfig.tableData.tableList.splice(index, 1);
    }
}
</script>

<style lang="less" scoped>
@import "./index.css";
</style>